<template>
	<view>
		<view class="search">
			<uni-search-bar class="uni-mt-10"  radius="100" placeholder="搜索社团" v-model="searchValue" clearButton="none" cancelButton="none" @confirm="search" />
		</view>
		
		<view class="section">
			<template v-for="item in clubsList" :key="item.id">
				<ClubItemV2 :club="item"/>
			</template>
		</view>
		
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { ref, watch } from 'vue'

import useClubStore from '@/store/club.js'
import { computed } from 'vue';
import ClubItemV2 from '@/components/club-item-v2/club-item-v2.vue'

const clubStore = useClubStore()
const { clubsList } = storeToRefs(clubStore)
onLoad(() => {
	clubStore.getClubsListAction() 
})

// 搜索社团
const searchValue = ref('')
function search() {
	console.log(searchValue);
	clubStore.getClubListByNameAction(searchValue.value,1000)
}

watch(searchValue,(newValue) => {
	if(newValue === '') {
		clubStore.getClubListByNameAction(newValue,1000)
	}
})

</script>
 
<style lang="less">
	.search {
		background-color: #fff;
	}
</style>
